const PropTypes = require('prop-types');
const React = require('react');
const {
    View,
    StyleSheet,
    Animated,
    Easing,
} = require('react-native');
const {
    JDText,
    JDImage,
    JDTouchable,
    JDDevice
} = require('@areslabs/jdreact-core-lib');


const ITEMHEIGHT = 50
const viewImg = require('../images/icon_view.png')
const contentImg = require('../images/icon_content.png')
const formImg = require('../images/icon_list.png')
const navImg = require('../images/icon_navi.png')
const mediaImg = require('../images/icon_media.png')
const otherImg = require('../images/icon_other.png')

const pageImg = require('../images/icon_page.png')
const baseImg = require('../images/icon_base.png')
const networkImg = require('../images/icon_network.png')
const arrowUp = require('../images/arrow_up.png')
const arrowDown = require('../images/arrow_down.png')
const arrowRight = require('../images/arrow_right.png')

class PulldownMenu extends React.Component {
    static contextTypes = {
        router: PropTypes.object
    };

    static propTypes = {
        routes: PropTypes.array,
        setNextRoutes: PropTypes.func,
    };

    state = {
        height: new Animated.Value(0),
        opa: new Animated.Value(0),
    };

    render() {
        return (
            <View style={styles.wrapper}>
                {this.props.routes.map((item, index) => {
                    let height = item.pages.length * ITEMHEIGHT
                    return (
                        <View key={index} style={styles.group}>
                            <JDTouchable onPress={() => {
                                this.componentToggle(index)
                            }}>
                                <View style={[styles.groupHeader]}>
                                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                        {(() => {
                                            switch (item.id) {
                                                case 'view':
                                                    return <JDImage style={styles.listImg} source={viewImg} />
                                                    break;
                                                case 'content':
                                                    return <JDImage style={styles.listImg} source={contentImg} />
                                                    break;
                                                case 'form':
                                                    return <JDImage style={styles.listImg} source={formImg} />
                                                    break;
                                                case 'nav':
                                                    return <JDImage style={styles.listImg} source={navImg} />
                                                    break;
                                                case 'media':
                                                    return <JDImage style={styles.listImg} source={mediaImg} />
                                                    break;
                                                case 'other':
                                                    return <JDImage style={styles.listImg} source={otherImg} />
                                                    break;
                                                case 'page':
                                                    return <JDImage style={styles.listImg} source={pageImg} />
                                                    break;
                                                case 'base':
                                                    return <JDImage style={styles.listImg} source={baseImg} />
                                                    break;
                                                case 'network':
                                                    return <JDImage style={styles.listImg} source={networkImg} />
                                                    break;
                                            }
                                        })()}
                                        <View style={{ marginLeft: JDDevice.getRpx(24) }}>
                                            <JDText style={[styles.listText, { color: '#2E2D2D' }]}>{item.name}</JDText>
                                        </View>

                                    </View>
                                    {item.open ? <JDImage style={{ width: JDDevice.getRpx(30), height: JDDevice.getRpx(30) }} source={arrowUp} /> :
                                        <JDImage style={{ width: JDDevice.getRpx(30), height: JDDevice.getRpx(30) }} source={arrowDown} />}


                                </View>
                            </JDTouchable>
                            <View style={[item.open ? null : { height: 0, overflow: 'hidden' }]}>
                                <Animated.View style={
                                    {
                                        opacity: this.state.opa,
                                        height: this.state.height.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [0, height]
                                        }),

                                    }
                                }>
                                    {item.pages.map((sItem, sIndex) => {
                                        return (
                                            <JDTouchable key={sIndex} onPress={() => {
                                                this.context.router[`toExample-${sItem.id}`]({
                                                    title: sItem.title,
                                                })
                                            }}>
                                                <View
                                                    style={[styles.listItem, item.pages.length !== (sIndex + 1) ? styles.bottomUnderline : '']}>
                                                    <View style={{flexDirection:'row',alignItems:'center'}}>
                                                        <JDText style={{ fontSize: 18, color: '#2E2D2D' }}>
                                                            {sItem.title}
                                                        </JDText>
                                                        <JDText style={{ fontSize: 16, color: '#848484',paddingLeft: JDDevice.getRpx(16) }}>
                                                            {sItem.desc}
                                                        </JDText>
                                                    </View>
                                                    <JDImage style={{ width: JDDevice.getRpx(28), height: JDDevice.getRpx(28) }} source={arrowRight} />
                                                </View>
                                            </JDTouchable>
                                        )
                                    })}
                                </Animated.View>
                            </View>
                        </View>
                    )
                })}
            </View>
        )

    }

    componentToggle = (index) => {
        let nextState = [...this.props.routes]
        nextState[index].open = !nextState[index].open
        if (nextState[index].open) {
            nextState.forEach((sItem, sIndex) => {
                if (index !== sIndex) sItem.open = false
            })
        }
        this.props.setNextRoutes(nextState)
        // this.setState({
        //     routes: nextState
        // })
        if (nextState[index].open) {
            var timing = Animated.timing;
            Animated.sequence([
                //Animated.delay(800),
                Animated.parallel(['opa', 'height'].map(property => {
                    return timing(this.state[property], {
                        toValue: 1,
                        duration: 500,
                        easing: Easing.linear
                    });
                }))
            ]).start(() => {
                this.setState({
                    height: new Animated.Value(0),
                    opa: new Animated.Value(0),
                })
            });
        }
    };
}

const styles = StyleSheet.create({
    wrapper: {
        marginBottom: 40
    },
    group: {
        marginTop: 10,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: '#fff',
        overflow: 'hidden',

    },
    groupHeader: {
        height: ITEMHEIGHT,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    listText: {
        fontSize: 18,
    },
    listImg: {
        width: 30,
        height: 30,
    },
    listItem: {
        height: ITEMHEIGHT,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    bottomUnderline: {
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8'
    }
});
module.exports = PulldownMenu;
